<template>
  <div class="itemListWrap">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="图纸id">
        <el-input v-model="formInline.id" placeholder="图纸id"></el-input>
      </el-form-item>
      <el-form-item label="图纸名称">
        <el-input v-model="formInline.name" placeholder="图纸名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addItem()">新增</el-button>
      </el-form-item>
       <span> 新增时题目为123 或 type过长会走异常处理 逻辑</span>
    </el-form>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        fixed
        prop="id"
        label="唯一id"
      >
      </el-table-column>
      <el-table-column
        fixed
        prop="name"
        label="标题"
       >
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型">
      </el-table-column>

      <el-table-column
          prop="description"
          label="描述">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="300">
        <template slot-scope="scope">
          <el-button  size="small" type="dang" @click="deleteItem(scope.row)">删除</el-button>
          <el-button  size="small" type="err" @click="edit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10]"
        :page-size="10"
        layout="total, sizes, prev, pager, next"
        :total="totalPageSize">
      </el-pagination>
<!--      编辑弹出框-->
      <el-dialog
        title="修改"
        :visible.sync="dialogVisible"
        width="30%"
        >
        <el-form :inline="true" :model="editForm" class="demo-form-inline">
          <el-form-item label="标题">
            <el-input v-model="editForm.name" placeholder="标题"></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-input v-model="editForm.type" placeholder="类型"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="editForm.description" placeholder="描述"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editItem()">确 定</el-button>
  </span>
      </el-dialog>
<!--      新增弹出框-->
      <el-dialog
        title="新增"
        :visible.sync="addVisible"
        width="30%"
      >
        <el-form :inline="true" :model="addForm" class="demo-form-inline">
          <el-form-item label="标题">
            <el-input v-model="addForm.name" placeholder="标题"></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-input v-model="addForm.type" placeholder="类型"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="addForm.description" placeholder="描述"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="addVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmAddItem()">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 获取全部图书
import {editForm, getItemList, searchItem} from '@/api/itemList.js'
import axios from 'axios'
export default {
  name: 'itemList',
  data(){
    return{
      name:"cxy",
      //查询
      formInline: {
        id: '',
        name: ''
      },
      //表单
      tableData:[],
      currentPage: 1,
      totalPageSize:22,
      pageSize:10,
      dialogVisible: false,
      editForm:{
        name:"",
        type:"",
        description:"",
        id:""
      },
      addVisible:false,
     addForm:{
        name:"",
        type:"",
        description:"",
        id:""
      },
    }
  },
  methods:{
    getList(){
     getItemList({currentPage:this.currentPage,pageSize:this.pageSize,title:this.formInline.name}).then((res)=>{
          console.log('图纸列表',res)
       this.tableData =res.data.records
       this.totalPageSize = res.data.total
      })
    },
    addItem(){
      this.addVisible = true
      this.addForm.name = ""
      this.addForm.type = ""
      this.addForm.description = ""
    },
    confirmAddItem(){
      axios.post("http://localhost:808/books",this.addForm).then(res=>{
        console.log("新增",res)
        if(res.data.flag === true){
          this.$message({
            message: '新增成功',
            type: 'success'
          });
          this.addVisible = false
        }else{
          this.$message({
            message: res.data.msg,
            type: 'error'
          });
        }
        this.getList()

      })
    },
    deleteItem(row){
      console.log("删除",row)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete(`http://localhost:808/books/${row.id}`).then(res=> {
          console.log(res)
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.getList()
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    edit(row){
      console.log("编辑",row)
      this.dialogVisible = true
      this.editForm.name = row.name
      this.editForm.type = row.type
      this.editForm.description = row.description
      this.editForm.id = row.id


    },
    editItem(){
      this.dialogVisible = true
      console.log("确认修改",this.editForm)
      // editForm(this.editForm).then(res=>{
      //   console.log("bianji",res)
      // })
      axios.put("http://localhost:808/books",this.editForm).then(res=>{
        console.log(res)
        if(res.data.flag ===true){
          this.dialogVisible = false
          this.$message({
            message: '更改成功',
            type: 'success'
          });
          this.getList()
        }else{
          this.$message({
            message: '更改失败'+res.data.msg,
            type: 'error'
          });
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getList()
    },
    onSubmit() {
      console.log('查询!',this.formInline);
      searchItem({id:this.formInline.id}).then(res=>{
        console.log("查询结果",res)
        var temp =[]
        temp.push(res.data)
        this.tableData =temp
        this.totalPageSize = temp.length
        if(this.formInline.id === ""){
          this.currentPage = 1
          this.getList()
        }

      })
    }
  },
  created() {
    console.log("进入图纸页面")

    this.getList()
  }

}
</script>

<style scoped>
.itemListWrap {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
  padding:10px 20px;
}
.block{
  text-align: center;
  margin-top:20px;
}
</style>

